<template>
  <div
    :draggable="!!isdraggable"
    class="tree-block"
    @dragstart="dragstart($event)"
    @dragend="dragend($event)">
    <div
      :tree-id="model[custom_field.id]"
      :tree-p-id="model.parent_id"
      class="tree-row"
      @click="toggle">
      <column
        v-for="(subItem, subIndex) in columns"
        :class="'align-' + subItem.align"
        :field="subItem.field"
        :width="subItem.width"
        :flex="subItem.flex"
        :key="subIndex">
        <span v-if="subItem.type === 'selection'">
          <space :depth="depth"/>
          <span v-if = "model[custom_field.lists] && model[custom_field.lists].length" :class="[model[custom_field.open] ? 'arrow-bottom' : 'arrow-right']" class="zip-icon"/>
          <span v-else class="zip-icon arrow-transparent"/>
          <span v-if="subItem.formatter" v-html="subItem.formatter(model)"/>
          <span v-else v-html="model[subItem.field]"/>
        </span>
        <span v-else-if="subItem.type === 'action'">
          <a
            v-for="(acItem, acIndex) in subItem.actions"
            :key="acIndex"
            class="action-item"
            type="text"
            size="small"
            @click.stop.prevent="acItem.onclick(model)">
            <i :class="acItem.icon" v-html="acItem.formatter(model)"/>
          </a>
        </span>
        <span v-else-if="subItem.type === 'checkbox'">
          <input
            :name="model[custom_field.id]"
            v-model="model[custom_field.checked]"
            :checked="model[custom_field.checked] || false"
            type="checkbox"
            class="checkbox action-item"
            @click.stop="onCheckboxClick($event, model)">
        </span>
        <span v-else-if="subItem.type === 'edit'">
          <!-- <span v-if="subItem.formatter" v-html="subItem.formatter(model)"/> -->
          <!-- <span @click.stop.prevent="ss" >{{ model[subItem.field] }}</span> -->
          <div @click.stop.prevent="isDisabled = !isDisabled">
            <el-input v-model="model[subItem.field]" :autofocus="isDisabled" size="medium" >{{ model[subItem.field] }}</el-input>
          </div>
        </span>
        <span v-else>
          <span v-if="subItem.formatter" v-html="subItem.formatter(model)"/>
          <span v-else>{{ model[subItem.field] }}</span>
        </span>
      </column>
      <div class="hover-model" style="display: none">
        <div class="hover-block prev-block">
          <i class="el-icon-caret-top"/>
        </div>
        <div class="hover-block center-block">
          <i class="el-icon-caret-right"/>
        </div>
        <div class="hover-block next-block">
          <i class="el-icon-caret-bottom"/>
        </div>
      </div>
    </div>
    <row
      v-for="(item, index) in model[custom_field.lists]"
      v-show="model[custom_field.open]"
      :model="item"
      :columns="columns"
      :key="index"
      :isdraggable="isdraggable"
      :depth="depth * 1 + 1"
      :custom_field="custom_field"
      :on-check="onCheck"
      :is-contain-children="isContainChildren"/>
  </div>

</template>
<script>
import column from './column.vue'
import space from './space.vue'
export default {
  name: 'Row',
  components: {
    column,
    space
  },
  props: ['model', 'depth', 'columns', 'isdraggable', 'custom_field', 'onCheck', 'isContainChildren'],
  data() {
    return {
      isDisabled: true,
      open: false,
      visibility: 'visible'
    }
  },
  computed: {
    isFolder() {
      return this.model[this.custom_field.lists] && this.model[this.custom_field.lists].length
    }
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.model[this.custom_field.open] = !this.model[this.custom_field.open]
        this.$forceUpdate()
      }
    },
    dragstart(e) {
      if (navigator.userAgent.indexOf('Firefox') >= 0) {
        // Firefox drag have a bug
        e.dataTransfer.setData('Text', this.id)
      }
      window.dragId = e.target.children[0].getAttribute('tree-id')
      window.dragParentNode = e.target
      e.target.style.opacity = 0.2
    },
    dragend(e) {
      e.target.style.opacity = 1
    },
    setAllCheckData(curList, flag) {
      const listKey = this.custom_field.lists
      for (let i = 0; i < curList.length; i++) {
        var item = curList[i]
        this.$set(item, 'checked', flag)
        if (item[listKey] && item[listKey].length) {
          this.setAllCheckData(item[listKey], flag)
        }
      }
    },
    onCheckboxClick(evt, model) {
      const list = model[this.custom_field.lists]
      // 判断是否有子节点，如有需递归处理
      if (list && this.isContainChildren) {
        this.setAllCheckData(model[this.custom_field.lists] || [], !!evt.target.checked)
      } else {
        this.$set(model, 'checked', !!evt.target.checked)
      }
      this.onCheck && this.onCheck()
    }
  }
}
</script>
<style lang="scss">
.tree-block{
    width: 100%;
    background: rgba(255,255,255,0.8)
}
.tree-row{
    position: relative;
    display: flex;
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
    line-height: 32px;
    &:hover{
        background: #ecf5ff
    }
    .align-left{
        text-align: left;
    }
    .align-right{
        text-align: right;
    }
    .align-center{
        text-align: center;
    }
}
.hover-model{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
}
.hover-block{
    display: flex;
    opacity: 0.1;
    transition: opacity 0.5s;
    justify-content: center;
    align-items: center;
    i{
        color: #FFF;
    }
}
.prev-block{
    height: 25%;
    background: #a0c8f7;
}
.center-block{
    height: 50%;
    background: #a0c8f7;
}
.next-block{
    height: 25%;
    background: #a0c8f7;
}
.action-item{
    color: #409eff;
    cursor: pointer;
    i{
        font-style: normal;
    }
}
.zip-icon{
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    background: url('') no-repeat center;
    background-size: cover;
}
.arrow-transparent{
    visibility: hidden;
}
.arrow-right{

}
.arrow-bottom{
    transform: rotate(90deg)
}
[draggable=true] {
-khtml-user-drag: element;
}
</style>
